{extend name="public/base" /}
{block name="style"}
    <style>




        .toggle-pwd {
            color: #888;
            font-size: 16px;
            cursor: pointer;
            flex-shrink: 0;
        }

        /* 统一复选框样式（登录页+注册页通用） */
        .checkbox-group {
            margin: 10px 0 20px; /* 登录页调整为该间距，注册页保持15px */
            position: relative;
        }
        .custom-checkbox {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            cursor: pointer;
            font-size: 13px;
        }
        .custom-checkbox input {
            /* 隐藏原生复选框但保留交互能力 */
            opacity: 0;
            width: 18px;
            height: 18px;
            position: absolute;
            cursor: pointer;
        }
        .checkbox-icon {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 1px solid #ccc;
            border-radius: 3px;
            background-color: #fff;
            position: relative;
            margin-right: 8px;
            transition: all 0.2s ease;
        }
        /* 选中状态样式（绿色主题统一） */
        .custom-checkbox input:checked + .checkbox-icon {
            background-color: #1AAD19;
            border-color: #1AAD19;
        }
        /* 对勾图标（使用FontAwesome统一） */
        .custom-checkbox input:checked + .checkbox-icon::after {
            content: "\f00c";
            font-family: "FontAwesome";
            font-size: 12px;
            color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .checkbox-text {
            color: #888;
        }
        /* 响应式调整 */
        @media (max-width: 350px) {
            .wy-Module-con {
                padding: 20px 12px;
            }
        }
    </style>
{/block}
<!--主体-->
{block name="content"}

<!-- 头部导航 -->
<div class="header">
    <a href="javascript:void(0);" class="back-btn">
        <i class="fa fa-angle-left" style="font-size: 24px;"></i>
    </a>
    <h1 class="header-title">用户登录</h1>
</div>

<div class='weui-content'>
    <!-- 登录模块 -->
    <div class="wy-Module">
        <div class="wy-Module-con">
            <form class="weui-form" id="loginForm">
                <div class="error-tip" id="errorTip"></div>
                <!-- 手机号输入 -->
                <div class="weui-form-group">
                    <div class="weui-input-box">
                        <i class="fa fa-envelope input-icon"></i>
                        <input type="email" class="weui-input" placeholder="请输入邮箱号" name="email">
                    </div>
                </div>

                <!-- 密码输入 -->
                <div class="weui-form-group">
                    <div class="weui-input-box">
                        <i class="fa fa-lock input-icon"></i>
                        <input type="password" class="weui-input" id="password" placeholder="请输入密码" name="password">
                        <i class="fa fa-eye toggle-pwd" id="togglePwd"></i>
                    </div>
                </div>

                <!-- 记住我选项（统一复选框样式） -->
                <div class="checkbox-group">
                    <label class="custom-checkbox" for="remember">
                        <input type="checkbox" name="remember"  value = "1" id="remember">
                        <span class="checkbox-icon"></span>
                        <span class="checkbox-text">记住我</span>
                    </label>
                </div>

                <!-- 登录按钮（绿色风格） -->
                <button type="button" class="weui-btn weui-btn_primary" id="loginBtn">登录</button>
            </form>

            <!-- 辅助链接 -->
            <div class="login-links">
                <a href="/forget.html" class="login-link">忘记密码</a>
                <a href="/register.html" class="login-link">注册账号</a>
            </div>
        </div>
    </div>

    <!-- 底部版权 -->
    <div class="copyright">
        © 2025 数字货币交易平台 版权所有
    </div>
</div>
{/block}
{block name="script"}
<script>


    // 密码显示/隐藏切换
    const togglePwd = document.getElementById('togglePwd');
    const passwordInput = document.getElementById('password');

    togglePwd.addEventListener('click', function() {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        this.className = type === 'password' ? 'fa fa-eye toggle-pwd' : 'fa fa-eye-slash toggle-pwd';
    });
    $("#loginBtn").click(function (){
       const email =  $('input[name="email"]').val();
       const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
       const passwd = $('input[name="password"]').val();
       if (!email) {
           $.toptip('请输入邮箱地址', 'error');
           return;
       }
       if (!emailReg.test(email.trim())) {
           $.toptip('请输入有效的邮箱地址', 'error');
           return;
       }
        if (!passwd) {
            $.toptip('请输入密码', 'error');
            return;
        }
        post("/do-login",$("#loginForm").serialize());
    })

</script>
{/block}
